<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理 - 班级管理系统</title>
    <script src="assets/vendor/react.development.js"></script>
    <script src="assets/vendor/react-dom.development.js"></script>
    <script src="assets/vendor/babel.min.js"></script>
    <script src="assets/vendor/tailwind.js"></script>
    <link rel="stylesheet" href="assets/css/styles.css">
    <link rel="stylesheet" href="assets/css/common.css">
    <style>
        .bg-grid {
            background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
            background-size: 20px 20px;
        }
    </style>
    <script>
        // 如果未登录则跳转到登录页
        (function(){
            try {
                if (localStorage.getItem('auth.loggedIn') !== 'true') {
                    window.location.replace('login.html');
                }
            } catch (e) {}
        })();
    </script>
    <!-- 确保先加载工具库和基础组件 -->
    <script src="assets/js/utils.js"></script>
    <script src="assets/js/components/common.js"></script>
    <script src="assets/js/components/UserFormModal.js"></script>
    <!-- 最后加载教师管理组件 -->
    <script src="assets/js/pages/TeacherManagement.js"></script>
</head>
<body class="min-h-screen bg-gray-50 m-0 p-0 overflow-hidden">
    <div id="root"></div>
    
    <script>
        // 检查并渲染TeacherManagement组件
        function renderTeacherManagement() {
            console.log('开始尝试渲染TeacherManagement组件');
            console.log('TeacherManagement是否存在:', typeof window.TeacherManagement);
            console.log('Utils是否存在:', typeof window.Utils);
            console.log('UserFormModal是否存在:', typeof window.UserFormModal);
            console.log('DataTable是否存在:', typeof window.DataTable);
            
            const rootElement = document.getElementById('root');
            if (!rootElement) {
                console.error('未找到root元素');
                return;
            }
            
            // 如果TeacherManagement已加载，直接渲染
            if (typeof window.TeacherManagement === 'function') {
                console.log('TeacherManagement组件已加载，开始渲染');
                ReactDOM.render(
                    React.createElement(window.TeacherManagement),
                    rootElement
                );
                return;
            }
            
            // 如果TeacherManagement未加载，设置轮询检查
            console.warn('TeacherManagement组件尚未加载，设置轮询检查');
            let attempts = 0;
            const maxAttempts = 10;
            const interval = setInterval(() => {
                attempts++;
                console.log(`尝试检查TeacherManagement组件 (${attempts}/${maxAttempts})`);
                
                if (typeof window.TeacherManagement === 'function') {
                    clearInterval(interval);
                    console.log('检测到TeacherManagement组件已加载，开始渲染');
                    ReactDOM.render(
                        React.createElement(window.TeacherManagement),
                        rootElement
                    );
                } else if (attempts >= maxAttempts) {
                    clearInterval(interval);
                    console.error('TeacherManagement组件加载超时');
                    
                    // 显示备用内容
                    rootElement.innerHTML = `
                        <div class="p-8 bg-white rounded-lg shadow-md mx-4 my-4">
                            <h2 class="text-xl font-bold text-gray-800 mb-4">教师管理</h2>
                            <div class="p-6 border border-red-200 bg-red-50 rounded-lg">
                                <p class="text-gray-700">教师管理组件加载失败，请检查以下文件是否正确加载：</p>
                                <ul class="list-disc pl-5 mt-2">
                                    <li>assets/js/utils.js</li>
                                    <li>assets/js/components/common.js</li>
                                    <li>assets/js/components/UserFormModal.js</li>
                                    <li>assets/js/pages/TeacherManagement.js</li>
                                </ul>
                                <button onclick="window.location.reload()" 
                                        class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                                    刷新页面重试
                                </button>
                            </div>
                        </div>
                    `;
                }
            }, 500);
        }
        
        // 页面加载完成后开始渲染
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', renderTeacherManagement);
        } else {
            renderTeacherManagement();
        }
        
        // 监听TeacherManagementLoaded事件
        window.addEventListener('TeacherManagementLoaded', function() {
            console.log('接收到TeacherManagementLoaded事件');
            renderTeacherManagement();
        });
    </script>
</body>
</html>